<script setup lang="ts">
import { getPosts } from '@/request/postRequest';
import router from '@/router';
import { onMounted, reactive } from 'vue';
import { useUserStore } from '@/stores/user';

let state = reactive({
  tableData: [
    // {
    //   createdTime: '2016-05-03',
    //   name: 'Tom',
    //   address: 'No. 189, Grove St, Los Angeles',
    // },
    // {
    //   createdTime: '2016-05-02',
    //   name: 'Tom',
    //   address: 'No. 189, Grove St, Los Angeles',
    // },
  ]
})

const createPost = function () {
  router.push('/createPost');
}

onMounted(() => {
  getPosts(20, 0).then(res => {
    state.tableData = res.data.data
    // Vue.set(tableData,res.data.data) 
  })
});

const deletePost= ()=>{
  
}

</script>

<template>
  <main>
    <div class="common-layout">
      <el-container>
        <!-- 发帖按钮、搜索栏 -->
        <el-header>
          <div style="direction: rtl">
            <el-button type="primary" style="direction: rtl;" @click="createPost">发帖</el-button>
            <el-button type="primary" style="direction: rtl;" @click="deletePost">发帖</el-button>
          </div>
        </el-header>
        <!-- 帖子表格 -->
        <!-- 帖子标题、发帖人、发帖时间 -->
        <el-main>
          <el-table :data="state.tableData" style="width: 100%">
            <el-table-column label="帖子标题" width="180">
              <template #default="scope1">
                {{scope1.row.postName }}
              </template>
            </el-table-column>
            <el-table-column prop="postContent"></el-table-column>
            <el-table-column prop="userId" label="发帖人" width="180" />
            <el-table-column prop="updatedTime" label="更新时间" />
          </el-table>
        </el-main>
        <!-- 分页 -->
        <el-footer>
          <div class="example-pagination-block" style="position: absolute; right: 0">
            <div class="example-demonstration">When you have few pages</div>
            <el-pagination layout="prev, pager, next" :total="50" />
          </div>
        </el-footer>
      </el-container>
    </div>
  </main>
</template>

<style scoped></style>